<style lang="less">
  @import './project-item-detail.less';
</style>

<template>
  <div class="project-item-detail">
    <Card class="card-box">
      <!-- <Tabs type="card" v-model="currentTab">
        <TabPane v-for="tab in tabsList" :key="tab.code + $route.params.projectId" :label="tab.name">{{ tab.name }}</TabPane>
      </Tabs> -->
      <div class="define-tabs-nav">
        <div
          v-for="(item, index) in tabsList"
          :key="index"
          @click="handleTabBarNav(index)"
          :class="{
            'define-tabs-tab': true,
            'is-tab-bar-show': optionType === 'edit'  || (optionType === 'create' && maxTabIndex >= index),
            'active-tab-bar': currentTab === item.code
          }"
        >
          {{ item.name }}
        </div>
      </div>
      <Tabs :animated="false" class="tabs-list scrollbar-none" type="card" v-model="currentTab">
        <TabPane
          :class="{'isTabShow': currentTab === 'baseInfo'}"
          name="baseInfo"
          label="基本信息">
          <base-info
            @on-move-forward="changeCurrentTab"
            @on-save-projectid="getCreateProjectId"
            ></base-info>
        </TabPane>
        <TabPane
          :class="{'isTabShow': currentTab === 'dataStructure'}"
          name="dataStructure"
          label="数据结构">
          <data-structure
            ref="dataStructure"
            :createId="createProjectId"
            @on-move-forward="changeCurrentTab"
            ></data-structure>
        </TabPane>
        <TabPane
          :class="{'isTabShow': currentTab === 'ruleManagement'}"
          name="ruleManagement"
          label="规则">
          <rule-management
            :createId="createProjectId"
            @on-move-forward="changeCurrentTab"
            ></rule-management>
        </TabPane>
        <TabPane
          :class="{'isTabShow': currentTab === 'decisionFlow'}"
          name="decisionFlow"
          label="决策流">
            <decision-flow
              ref="decisionFlow"
              :createId="createProjectId"
              @on-move-forward="changeCurrentTab"
            />
        </TabPane>
        <TabPane
          :createId="createProjectId"
          :class="{'isTabShow': currentTab === 'effectAnalysis'}"
          name="effectAnalysis"
          label="效果分析">
        </TabPane>
        <TabPane
          :createId="createProjectId"
          :class="{'isTabShow': currentTab === 'submitApproval'}"
          name="submitApproval"
          label="评估审批">
        </TabPane>
      </Tabs>
    </Card>

  </div>
</template>

<script>
// import axios from 'axios'
import { setDsResource } from '@/libs/util'
import { queryResourceBaseInfoApi } from '@/api/project-resource'
import baseInfo from './base-info/base-info'
import dataStructure from './data-structure/data-structure'
import ruleManagement from './rule-management/rule-management'
import decisionFlow from './decision-flow/decision-flow'

export default {
  name: 'project_item_detail',
  components: {
    baseInfo,
    dataStructure,
    ruleManagement,
    decisionFlow
  },
  data () {
    return {
      // 记录tab历史活动最大值
      maxTabIndex: 0,
      tabsList: [],
      currentTab: 'baseInfo',
      // 新建项目基本信息后返回的id
      createProjectId: 0,
      // 所有项目下所属资源基本信息列表
      resIdList: []
    }
  },
  computed: {
    // 判断当前路由下是'新建' or '编辑'
    optionType () {
      return this.$route.params.projectId === '_create' ? 'create' : 'edit'
    }
  },
  methods: {
    setTabsList () {
      this.tabsList = [{
        code: 'baseInfo',
        name: '基本信息',
        isSaved: false
      }, {
        code: 'dataStructure',
        name: '数据结构',
        isSaved: false
      }, {
        code: 'ruleManagement',
        name: '规则',
        isSaved: false
      }, {
        code: 'decisionFlow',
        name: '决策流',
        isSaved: false
      }, {
        code: 'effectAnalysis',
        name: '效果分析',
        isSaved: false
      }, {
        code: 'submitApproval',
        name: '提交审批',
        isSaved: false
      }]
    },
    /**
     * 前进、后退按钮执行事件
     * @param {params} [Object] activeName: '操作页对应tabs的name'，option:'prev'(上一步按钮)、'next'(下一步按钮)
      */
    changeCurrentTab (params) {
      const activeIndex = this.tabsList.findIndex(v => v.code === params.activeName)
      const curIndex = params.option === 'prev' ? activeIndex - 1 : activeIndex + 1
      if (curIndex >= this.maxTabIndex) this.maxTabIndex = curIndex
      this.currentTab = this.tabsList[curIndex].code
    },
    // 获取新建后返回的projectId
    getCreateProjectId (id) {
      this.createProjectId = id
      this.setResourceBaseInfo(id)
    },
    handleTabBarNav (index) {
      if (index > this.maxTabIndex) this.maxTabIndex = index
      this.currentTab = this.tabsList[index].code
    },
    // 获取项目所属资源的基本信息列表--resId
    setResourceBaseInfo (projectId) {
      const path = {
        projectId
      }
      queryResourceBaseInfoApi(path).then((res) => {
        if (res.data.code === 2000) {
          this.resIdList = res.data.data.items || []
          const ruleList = this.resIdList.filter(item => item.ruleSetType).map((ele) => {
            return {
              name: ele.resName,
              value: ele.resCode
            }
          })
          setDsResource(window.location.pathname, 'ruleList', ruleList)
          this.$refs.dataStructure.init(this.resIdList)
          // 执行决策流的,新增的时候不执行
          this.optionType === 'edit' && this.$refs.decisionFlow.initBpmn()
        }
      })
    }
    // 获取资源内容
    // getResourceContent (projectId) {
    //   const inputDataResIdTmp = this.resIdList.filter(item => item.dataType === 'input')[0]
    //   const inputDataResId = inputDataResIdTmp && inputDataResIdTmp.resId ? inputDataResIdTmp.resId : ''
    //   this.inputDataResId = inputDataResId

    //   const outputDataResIdTmp = this.resIdList.filter(item => item.dataType === 'output')[0]
    //   const outputDataResId = outputDataResIdTmp && outputDataResIdTmp.resId ? outputDataResIdTmp.resId : ''
    //   this.outputDataResId = outputDataResId
    //   // 输入数据content接口
    //   const inputParams = {
    //     projectId,
    //     resId: inputDataResId
    //   }
    //   const queryInputContent = queryResourceContentByIdApi(inputParams)

    //   // 输出数据content接口
    //   const outputParams = {
    //     projectId,
    //     resId: outputDataResId
    //   }
    //   const queryOutputContent = queryResourceContentByIdApi(outputParams)
    //   // 决策流content接口

    //   axios.all([ queryInputContent, queryOutputContent ])
    //     .then(axios.spread((inputRes, ouputRes) => {
    //       const outputList = ouputRes.data.data ? ouputRes.data.data : []
    //       setDsResource(window.location.pathname, 'outputList', outputList)

    //       // todo init各组件
    //       this.$refs.dataStructure.init(inputRes, ouputRes)
    //       // 执行决策流的,新增的时候不执行
    //       this.optionType === 'edit' && this.$refs.decisionFlow.initBpmn()
    //     }))
    // }
  },
  mounted () {
    this.setTabsList()
    if (this.optionType === 'edit') this.setResourceBaseInfo(this.$route.params.projectId)
  },
  beforeDestroy () {

  },
  destroyed () {

  }
}
</script>

<style>

</style>
